<template>
<div class="user-open">
    <el-row :gutter="20">
        <el-col :md="14" :xs="24">
            <el-card class="box-card">
                <template #header>
                    <div class="card-header">
                        <span>开放接口</span>
                        <el-tag @click="resetAppToken">重置AppToken</el-tag>
                    </div>
                </template>
                <div>
                    <el-form-item label="AppToken">
                        <el-input v-model="state.form.app_token" disabled placeholder="请输入ApiToken">
                            <template #append>
                                <el-button type="primary" icon="el-icon-DocumentCopy" @click="copy(state.form.app_token)"></el-button>
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="接口文档">
                        <el-link :underline="false" href="https://thinkctai.apifox.cn" target="_blank">https://thinkctai.apifox.cn</el-link>
                    </el-form-item>
                </div>
            </el-card>
        </el-col>
    </el-row>
</div>
</template>

<script setup lang="ts">
import {reactive} from "vue";
import {useUserInfo} from "/@/stores/userInfo";
import { ElMessage } from 'element-plus'
import { reset_app_token } from '/@/api/frontend/chat/user'

const userInfo = useUserInfo()


const state: {
    form: any,
} = reactive({
    form: {
        app_token: userInfo.app_token,
    }
})

// resetAppToken
function resetAppToken() {
    reset_app_token().then(res => {
        if (res.code === 1) {
            state.form.app_token = res.data.app_token
            userInfo.app_token = res.data.app_token
            ElMessage.success('重置成功')
        }
    })
}

// 复制
function copy(text: string) {
    const input = document.createElement('input')
    input.setAttribute('readonly', 'readonly')
    input.setAttribute('value', text)
    document.body.appendChild(input)
    input.select()
    input.setSelectionRange(0, 9999)
    if (document.execCommand('copy')) {
        document.execCommand('copy')
        ElMessage.success('复制成功')
    }
    document.body.removeChild(input)
}
</script>

<style scoped lang="scss">
.user-open {
    width: 100%;
    padding: 2px;
    .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .box-card {
        margin-bottom: 20px;
        .el-tag {
            cursor: pointer;
        }
    }
}
</style>
